<template>
    <div class="flex gap-1">
        <el-popover placement="bottom" title="" :width="180" trigger="hover" content="加入购物车">
            <template #reference>
                <button class="bg-[#4F46E5] text-white font-bold py-2 px-4 rounded flex justify-between items-center gap-1">
                    <el-icon size="20px">
                        <ShoppingCart />
                    </el-icon>
                </button>
            </template>
        </el-popover>
        <button class="bg-[#4F46E5] text-white font-bold py-2 px-4 rounded flex justify-between items-center gap-1">
            <el-icon size="20px">
                <Position />
            </el-icon> 购买
        </button>
        <button v-if="isDetail"
            class="bg-gray-200 flex gap-2 items-center  text-gray-800 px-6 py-2 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
            <el-icon size="20px">
                <Star />
            </el-icon>
            收藏
        </button>
    </div>
</template>

<script setup lang="ts">
defineProps<{ isDetail?: boolean }>();
</script>

<style scoped></style>